<template>
  <div class="home">
    <!--顶部搜索登录-->
    <div class="title">
      <div><img src="../../public/img/logo.png" alt=""></div>
    </div>
    <!--轮播图部分-->
    <div id="demo" class="carousel slide" data-ride="carousel">
      <!-- 指示符 -->
      <ul class="carousel-indicators">
        <li v-for="(val,index) in lunbo" data-target="#demo" data-slide-to="val.img_id" ></li>
        <!--<li data-target="#demo" data-slide-to="1"></li>-->
      </ul>
      <!-- 图片 -->
      <div class="carousel-inner">
        <div class="carousel-item" :class="val.class" v-for="(val,index) in lunbo">
          <img :src="val.src">
        </div>
      </div>
      <!-- 左右切换按钮 -->
      <a class="carousel-control-prev" href="#demo" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </a>
      <a class="carousel-control-next" href="#demo" data-slide="next">
        <span class="carousel-control-next-icon"></span>
      </a>
    </div>
    <!--小图展示-->
    <div class="small">
      <div><input type="text" placeholder="请输入搜索内容"></div>
      <div>
        <router-link to="./birthdayCake" v-for="(val,index) in smallPicShow" v-on:click.native="">
          <img :src="val.src" alt=""><br>{{val.cakeName}}
        </router-link>
      </div>
    </div>
    <!--热门推荐-->
    <div class="cake_show">
      <h3>热门推荐</h3>
      <!--左边-->
      <div class="food_show_left">
        <router-link to="">
          <img src="../../public/img/show-cake1.png" alt="">
          <span class="text1 one1 ">现做经典点心</span>
          <span class="text2 one">精选好物，看这里</span>
        </router-link>
        <router-link to="">
          <img src="../../public/img/show-cake2.png" alt="">
          <span class="text1 two1">人气热卖</span>
          <span class="text2 two">限时促销</span>
        </router-link>
        <router-link to="">
          <img src="../../public/img/show-cake3.png" alt="">
          <span class="text1 three1">加价，福利购</span>
          <span class="text2 three">吃出浓浓奶香</span>
        </router-link>
      </div>
      <!--右边-->
      <div class="food_show_right">
        <router-link to="">
          <p>NEW PRODUCT</p>
          <h4>新品推荐</h4>
          <img src="../../public/img/show-cake4.jpg" alt="">
        </router-link>
        <router-link to="">
          <p>MOUSSE CAKE SRIES</p>
          <h4>慕斯蛋糕</h4>
          <img src="../../public/img/show-cake5.jpg" alt="">
        </router-link>
      </div>
      <p id="clear"></p>
      <!-- <p class="more"><router-link to="">查看更多</router-link></p> -->
    </div>
    <!--商品展示-->
    <div class="big_cake">
      <h3>商品展示</h3>
      <div class="row row-cols-2 row-cols-md-2" >
        <div class="col mb-6"  v-for="(val,index) in arr">
          <div class="card">
            <router-link to="/detaile"><img :src="val.src" class="card-img-top" alt="..."></router-link>
            <div class="card-body">
              <router-link to=""><h6 class="card-title">{{val.cardTitle}}</h6></router-link>
              <p class="card-text"><router-link to="">{{val.price}}</router-link></p>
            </div>
          </div>
        </div>
      </div>
      <!--<p class="more"><router-link to="">查看更多</router-link></p>-->
    </div>
    <!--给父元素清除浮动-->
    <div class="non"></div>
  </div>
</template>
<style lang="less" scoped>

</style>
<script>
  //引入css样式
  import "../../public/css/home.css";
export default {
    name: 'Home',
    data(){
          return{
              lunbo:[
                  {img_id:0,src:'./img/banner2.jpg',class:'active'},
                  {img_id:1,src:'./img/banner1.jpg',class:''},
              ],
              // 小图展示部分数据
              smallPicShow:[
                  {id:1,src:'./img/small-cake1.png',cakeName:'生日蛋糕'},
                  {id:2,src:'./img/small-cake2.png',cakeName:'儿童蛋糕'},
                  {id:3,src:'./img/small-cake3.png',cakeName:'祝寿蛋糕'},
                  {id:4,src:'./img/samll-cake4.png',cakeName:'水果蛋糕'},
                  ],
              // 商品展示部分数据
              arr:[
                  {src:'./img/big-cake1.jpg',cardTitle:'儿童奶油蛋糕',price:'￥179'},
                  {src:'./img/big-cake2.jpg',cardTitle:'ins风清新奶油蛋糕',price:'￥169'},
                  {src:'./img/big-cake3.jpg',cardTitle:'田园简约风蛋糕',price:'￥159'},
                  {src:'./img/big-cake4.jpg',cardTitle:'浪漫城堡蛋糕',price:'￥169'},
                  {src:'./img/big-cake5.jpg',cardTitle:'你是唯一简约蛋糕',price:'￥245'},
                  {src:'./img/big-cake6.jpg',cardTitle:'正宗法式马卡龙蛋糕',price:'￥125'},
              ]
          }
    },
    methods:{
        // 向详情页传值
        // toMsg(){
        //     this.$route.push('./view_birthday_cake?cakeName='+smallPicShow);
        // },
    },
    components: {  //组件
      },

  }
</script>
